<template>
<van-popup class="pay-setting" position="right" :overlay="false" v-model="paySetting">
  <van-nav-bar title="支付中心" left-arrow @click-left="onClickLeft" left-text="返回">
  </van-nav-bar>
  <van-cell-group>
    <van-cell title="交易记录" is-link @click="openTradeRecordPanel" />
    <van-cell title="支付管理" is-link/>
  </van-cell-group>

  <van-cell-group>
    <van-cell title="支付安全" is-link/>
    <van-cell title="帮助中心" is-link/>
  </van-cell-group>
  <!-- 交易记录面板 -->
  <trade-record-panel :showTradeRecordPanel="showTradeRecordPanel" @closeTradeRecordPanel="closeTradeRecordPanel"></trade-record-panel>
</van-popup>
</template>

<script>
export default {
  props: ['paySetting'],
  data() {
    return {
      showTradeRecordPanel: false // 是否显示交易记录面板
    }
  },
  methods: {
    onClickLeft() {
      this.$emit('closePanel');
    },
    // 显示交易记录面板
    openTradeRecordPanel() {
      this.showTradeRecordPanel = true
    },
    // 关闭交易记录面板
    closeTradeRecordPanel() {
      this.showTradeRecordPanel = false
    }
  }
}
</script>

<style lang="scss">
.pay-setting {
    height: 100vh;
    width: 100%;
    background-color: #f2f2f2;
}
</style>
